import 'package:card_swiper/card_swiper.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shenfuhui/routers/routers.dart';
import 'package:webview_flutter/webview_flutter.dart';

import '../config/config.dart';
import '../views/number_controller_widget.dart';

class ProductDetailPage extends StatefulWidget {
  const ProductDetailPage({Key? key}) : super(key: key);

  @override
  State<ProductDetailPage> createState() => _ProductDetailState();
}

class _ProductDetailState extends State<ProductDetailPage> {
  var imgs = [];
  late WebViewController controller;
  double _webHeight = 750; //去计算得到网页的高度，然后设置高度
  late double _originalHeight; //原高度

  var guigeTitle = ['尺寸', '颜色'];
  var guigeSub = [
    ['100*100', '200*200'],
    ['红色', '绿色', '蓝色']
  ];
  var guigeSubIndex = [0, 0];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = WebViewController();
    controller.setJavaScriptMode(JavaScriptMode.unrestricted);
    controller.setNavigationDelegate(
      NavigationDelegate(onPageFinished: (url) async {
        //获取webView原始高度
        var originalHeight = await controller
            .runJavaScriptReturningResult("document.body.offsetHeight;");
        print('网页高度1-----$originalHeight');
        _originalHeight = double.parse(originalHeight.toString());
        setState(() {
          _webHeight = _originalHeight <= 0 ? 750 : _originalHeight;
        });
        print('网页高度2-----$_originalHeight');
      }),
    );
    controller.loadRequest(Uri.parse('https://m.hao123.com/'));

    setState(() {
      imgs.add(
          "https://www.shyaki.com/uploadfile/2021/0111/20210111052443839.jpg");
      imgs.add(
          "https://picnew13.photophoto.cn/20181201/lunbotutaobaoshuangshier-31074489_1.jpg");
    });
  }

  Widget getGuigeTitleItem(int index) {
    return StatefulBuilder(builder: (context1, state) {
      return Container(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              height: 35.w,
              child: Text(
                guigeTitle[index],
                style: TextStyle(fontSize: 24.sp, color: Config.colorText1),
              ),
            ),
            Container(
              margin: EdgeInsets.symmetric(vertical: 15.w),
              width: double.infinity,
              child: GridView.builder(
                shrinkWrap: true,
                physics: const NeverScrollableScrollPhysics(),
                itemCount: guigeSub[index].length,
                padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                itemBuilder: (BuildContext context, int index2) {
                  return getGuigeSubItem(index, index2, () {
                      state(() {
                      guigeSubIndex[index] = index2;
                    });
                  });
                },
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 15.w,
                    crossAxisSpacing: 30.w,
                    childAspectRatio: 3.5),
              ),
            ),
          ],
        ),
      );
    });
  }

  Widget getGuigeSubItem(int index, int index2, Function()? func) {
    return StatefulBuilder(builder: (context1, state) {
      return InkWell(
        onTap: func,
        //     () {
        //   state(() {
        //     guigeSubIndex[index] = index2;
        //   });
        // },
        child: Container(
          width: 60.w,
          alignment: Alignment.center,
          height: 30.w,
          decoration: index2 == guigeSubIndex[index]
              ? BoxDecoration(
                  color: Config.colorMain,
                  borderRadius: BorderRadius.circular(20.w),
                )
              : BoxDecoration(
                  border: Border.all(color: Config.colorText3, width: 2.w),
                  borderRadius: BorderRadius.circular(20.w),
                ),
          padding: EdgeInsets.symmetric(vertical: 3.w, horizontal: 10.w),
          child: Text(guigeSub[index][index2],
              style: TextStyle(
                  fontSize: 16.sp,
                  color: index2 == guigeSubIndex[index]
                      ? Config.colorWhite
                      : Config.colorText1)),
        ),
      );
    });
  }

  _showBasicModalBottomSheet(context) async {
    return showModalBottomSheet(
      isScrollControlled: false,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return Container(
          width: double.infinity,
          height: 710.w,
          padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 5.w),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15.w),
              topRight: Radius.circular(15.w),
            ),
          ),
          child: Column(
            children: [
              Container(
                height: 180.w,
                margin: EdgeInsets.symmetric(horizontal: 5.w, vertical: 0.w),
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Config.colorDivider, width: 2.w),
                  ),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      margin: EdgeInsets.only(left: 20.w, right: 20.w),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(5),
                        child: Image.network(
                          "https://pic1.zhimg.com/v2-6438843a4cbae9184b935a75a5059ac6_1440w.jpg?source=172ae18b",
                          fit: BoxFit.fill,
                          width: 140.w,
                          height: 140.w,
                        ),
                      ),
                    ),
                    Container(
                      height: 140.w,
                      width: 480.w,
                      child: Stack(
                        children: [
                          Text(
                            "￥0.00",
                            softWrap: true,
                            maxLines: 2,
                            overflow: TextOverflow.ellipsis,
                            style: TextStyle(color: Colors.red, fontSize: 26.w),
                          ),
                          Positioned(
                            bottom: 32.w,
                            child: Text(
                              "库存 999",
                              style: TextStyle(
                                  fontSize: 22.sp, color: Config.colorText1),
                            ),
                          ),
                          Positioned(
                            bottom: 0.w,
                            child: Text(
                              "规格",
                              style: TextStyle(
                                  fontSize: 22.sp, color: Config.colorText1),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Config.colorDivider, width: 2.w),
                  ),
                ),
                padding: EdgeInsets.symmetric(horizontal: 25.w, vertical: 25.w),
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: guigeTitle.length,
                  itemBuilder: (BuildContext context, int index) {
                    return getGuigeTitleItem(index);
                  },
                ),
              ),
              Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Config.colorDivider, width: 2.w),
                  ),
                ),
                padding: EdgeInsets.symmetric(horizontal: 25.w),
                height: 100.w,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "购买数量",
                      style:
                          TextStyle(fontSize: 28.sp, color: Config.colorText1),
                    ),
                    NumberControllerWidget(
                      numText: '0',
                      addValueChanged: (num) {
                        print(num);
                      },
                      removeValueChanged: (num) {
                        print(num);
                      },
                      updateValueChanged: (num) {},
                    )
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 25.w),
                width: 690.w,
                height: 90.w,
                child: ElevatedButton(
                  clipBehavior: Clip.antiAlias,
                  onPressed: () async {
                    Navigator.pop(context);
                    Routes.router.navigateTo(context, Routes.orderConfirm,
                        transition: TransitionType.inFromRight);
                  },
                  style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
                  child: const Text('确定'),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        color: Config.colorBg2,
        height: double.infinity,
        child: Stack(children: [
          //中部内容部分
          SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: [
                SizedBox(
                  //轮播
                  height: 710.w,
                  child: Swiper(
                    itemBuilder: (BuildContext context, int index) {
                      return Image.network(
                        imgs[index],
                        fit: BoxFit.fill,
                      );
                    },
                    onTap: (index) {
                      // Routes.navigateTo(context, Routes.movieDetail,
                      //     params: {'movieId': model.list[index].movieId});
                    },
                    autoplay: true,
                    layout: SwiperLayout.DEFAULT,
                    itemCount: imgs.length,
                    // viewportFraction: 0.7,
                    // scale: 0.8,
                    pagination: SwiperPagination(
                      builder: DotSwiperPaginationBuilder(
                        // size: Size(20.w, 4.w),
                        // activeSize: Size(20.w, 4.w),
                          size: 15.w,
                          activeSize: 15.w,
                          activeColor: Config.colorMain,
                          color: Config.colorWhite),
                    ),
                  ),
                ),
                //商品标题价格部分
                Container(
                  padding:
                      EdgeInsets.symmetric(horizontal: 20.w, vertical: 20.w),
                  decoration: BoxDecoration(color: Config.colorBg),
                  width: double.infinity,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(padding: EdgeInsets.only(top: 2.w)),
                      Text(
                        '商品名称',
                        style: TextStyle(
                            color: Config.colorText1, fontSize: 28.sp),
                      ),
                      Padding(padding: EdgeInsets.only(top: 10.w)),
                      Text(
                        '商品的一句话简介',
                        style: TextStyle(
                            color: Config.colorText3, fontSize: 24.sp),
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                      Padding(padding: EdgeInsets.only(top: 10.w)),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            '￥0.00',
                            style: TextStyle(
                                color: Colors.redAccent, fontSize: 24.sp),
                          ),
                          // Text(
                          //   '库存1',
                          //   style: TextStyle(
                          //       color: Config.colorText3, fontSize: 24.sp),
                          // ),
                        ],
                      ),
                    ],
                  ),
                ),

                Container(
                    width: double.infinity,
                    padding:
                        EdgeInsets.symmetric(horizontal: 20.w, vertical: 22.w),
                    margin: EdgeInsets.only(top: 20.w),
                    decoration: BoxDecoration(color: Config.colorBg),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 3,
                          child: Text(
                            '规    格',
                            style: TextStyle(
                                color: Config.colorText3, fontSize: 24.sp),
                          ),
                        ),
                        Expanded(
                          flex: 12,
                          child: Text(
                            '选择规格',
                            style: TextStyle(
                                color: Config.colorText1, fontSize: 24.sp),
                          ),
                        ),
                        Expanded(
                          flex: 3,
                          child: Container(
                            alignment: Alignment.centerRight,
                            child: Icon(
                              Icons.arrow_forward_ios,
                              size: 25.w,
                            ),
                          ),
                        ),
                      ],
                    )),
                Container(
                  width: double.infinity,
                  padding:
                      EdgeInsets.symmetric(horizontal: 20.w, vertical: 22.w),
                  decoration: BoxDecoration(color: Config.colorBg),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 3,
                        child: Text(
                          '发货地',
                          style: TextStyle(
                              color: Config.colorText3, fontSize: 24.sp),
                        ),
                      ),
                      Expanded(
                        flex: 12,
                        child: Text(
                          '广东/深圳',
                          style: TextStyle(
                              color: Config.colorText1, fontSize: 24.sp),
                        ),
                      ),
                      Expanded(
                        flex: 3,
                        child: Text(
                          '库存100',
                          textAlign: TextAlign.right,
                          style: TextStyle(
                              color: Config.colorText3, fontSize: 24.sp),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: double.infinity,
                  padding:
                      EdgeInsets.symmetric(horizontal: 20.w, vertical: 22.w),
                  decoration: BoxDecoration(color: Config.colorBg),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 3,
                        child: Text(
                          '保    障',
                          style: TextStyle(
                              color: Config.colorText3, fontSize: 24.sp),
                        ),
                      ),
                      Expanded(
                        flex: 12,
                        child: Text(
                          '正品保障、急速发货、售后无忧',
                          style: TextStyle(
                              color: Config.colorText1, fontSize: 24.sp),
                        ),
                      ),
                      Expanded(
                        flex: 3,
                        child: Text(
                          '',
                          textAlign: TextAlign.right,
                          style: TextStyle(
                              color: Config.colorText3, fontSize: 24.sp),
                        ),
                      ),
                    ],
                  ),
                ),
                //商品详情
                Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(top: 20.w),
                  padding:
                      EdgeInsets.symmetric(horizontal: 20.w, vertical: 22.w),
                  decoration: BoxDecoration(color: Config.colorBg),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '商品详情',
                        style: TextStyle(
                            color: Config.colorText1, fontSize: 28.sp),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 25.w),
                      ),
                      Container(
                        width: 750.w,
                        height: _webHeight,
                        child: WebViewWidget(
                          controller: controller,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Container(
            //顶部标题栏
            decoration: const BoxDecoration(color: Colors.transparent),
            height: 100.w,
            alignment: Alignment.centerLeft,
            margin: EdgeInsets.only(top: 40.w),
            padding: EdgeInsets.symmetric(horizontal: 30.w),
            child: InkWell(
              onTap: () {
                Routes.router.pop(context);
              },
              child: Container(
                padding: EdgeInsets.only(left: 15.w),
                decoration: BoxDecoration(
                  color: Config.colorBg,
                  borderRadius: BorderRadius.circular(35.w),
                ),
                width: 70.w,
                height: 70.w,
                child: Icon(
                  Icons.arrow_back_ios,
                  size: 45.w,
                ),
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            child: Container(
              decoration: const BoxDecoration(color: Config.colorBg),
              height: 100.w,
              width: 750.w,
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 30.w),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  SizedBox(
                    width: 70.w,
                    child: InkWell(
                      onTap: () {
                        Routes.navigateTo(context, Routes.mallHome);
                      },
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            Icons.local_mall_outlined,
                            size: 42.w,
                            color: Config.colorMain,
                          ),
                          Text('店铺',
                              style: TextStyle(
                                  fontSize: 21.sp,
                                  height: 1.4,
                                  color: Config.colorText1)),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 70.w,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(
                          Icons.star_border_purple500_outlined,
                          size: 42.w,
                          color: Config.colorMain,
                        ),
                        Text('收藏',
                            style: TextStyle(
                                fontSize: 21.sp,
                                height: 1.4,
                                color: Config.colorText1)),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 20.w),
                    width: 500.w,
                    child: ElevatedButton(
                      clipBehavior: Clip.antiAlias,
                      onPressed: () async {
                        // Routes.router.navigateTo(context, Routes.orderConfirm,
                        //     transition: TransitionType.inFromRight)
                        _showBasicModalBottomSheet(context);
                      },
                      style: ElevatedButton.styleFrom(
                          shape: const StadiumBorder()),
                      child: const Text('立即购买'),
                    ),
                  ),
                ],
              ),
            ),
          )
        ]),
      ),
    );
  }
}
